<template>
	<view class="main">
		<u-navbar title="" placeholder :safeAreaInsetTop="true" bgColor="#FFFFFF" titleStyle="color:#1E2020;"
			leftIcon="">
			<view class="top_tab" slot="left">
				<u-tabs :list="tabs" :current="current" :activeStyle="{color:'#000',fontSize:'30rpx',fontWeight:'600'}"
					:inactiveStyle="{color:'#C1C1C1'}" style="background:#FFF;padding:0rpx 10%;" lineWidth='30'
					lineColor="#468EFF" :itemStyle="{width:'calc(27% - 40rpx)',height:'40px',whiteSpace:'nowrap',padding: 0}"
					@change="changeTab"></u-tabs>
			</view>

			<view class="mine_top_top_right" slot="right" style="position: absolute; right: 0;">
				<image src="@/static/ico/ss.png" alt="" @tap="toPage('/pages/shop/seach')" class="img" />
			</view>
		</u-navbar>
		<u-sticky :offset-top="top" style="margin-top:15rpx;">

		</u-sticky>
		<u-sticky :offset-top="top" style="margin-top:15rpx;" v-show="current==1">
			<view class="search">
				<!-- <view class="search1" @click="searchShow = true;searchType = 1">
					<text>{{searchActive | avtive}}</text>
					<u-icon name="arrow-down-fill" size="8"></u-icon>
				</view> -->
				<uni-data-select
					 class="search1"
				      v-model="search1value"
				      :localdata="range1"
				      @change="changesearch1"
					  :clear="false"
				    >
					<u-icon name="arrow-down-fill" size="8"></u-icon></uni-data-select>
				<view class="line"></view>
				<uni-data-select
					 class="search2"
				      v-model="search2value"
				      :localdata="range2"
				      @change="changesearch2"
					  :clear="false"
				    >
					<u-icon name="arrow-down-fill" size="8"></u-icon></uni-data-select>
				<!-- <view class="search2" @click="searchShow = true;searchType = 2">
					<text>{{searchCondition|condition}}</text>
					<u-icon name="arrow-down-fill" size="8"></u-icon>
				</view> -->
			</view>
		</u-sticky>
		<view class="collection" :class="show1?'all-list': ''">
			<u-skeleton rows="2" titleWidth="100%" titleHeight="150" :loading="loading">
				<block v-if="current===0">
					<view class="item" v-for="(item ,i) in list" :key="i" @tap="toDetailorShowDialog(item)">
						<view class="img">
							<view class="boximg">
								<u--image :src="item.thumb" :fade="true" duration="450" width='100%' height="450rpx"
									:lazy-load="true" mode="aspectFill">
									<template v-slot:loading>
										<u-loading-icon color="#468EFF"></u-loading-icon>
									</template>
								</u--image>
							</view>
							<view v-if="item.num == 0 && current === 0" class="sell-out">
								<image src="@/static/images/sell-out.png" mode=""></image>
								<text class="sell-out-text">首发售罄</text>
							</view>
						</view>
						<view class="goodsInfo">
							<view class="left">
								<view class="title">{{ item.title }}</view>
								<view class="userinfo">
									<view class="avatar">
										<image :src="item.portrait?item.portrait:'../../static/ico/icon/nouser.png'" mode="aspectFit"></image>
									</view>
									<view class="username">
										{{item.user_name?item.user_name:item.nickname}}
									</view>
								</view>
							</view>
							<view class="right">
								<view v-if="current === 0" class="price">
									<text class="rmb">¥</text>
									<text>{{ item.price?item.price:item.base_price }}</text>
								</view>
								<view v-else class="price current2">
									<text class="rmb">¥</text>
									<text>{{ item.price?item.price:item.base_price }}</text>
								</view>
								<!-- <view v-if="current === 0" class="count">
									<text>发行{{ item.all_count }}份</text>
								</view> -->
								<view class="info u-label" v-if="current==1">
									{{item.goodsCode+'/'+item.allCount}}
								</view>
							</view>
						</view>
					</view>
					<view class="kgzw" v-if="list.length%2==1"></view>
					<block v-if="!loading&&list.length<1">
						<Empty text="暂无藏品"></Empty>
					</block>
					<view class="Isend" v-else-if="list.length==this.total&&this.total>2">
						已经到底了
					</view>
					<view class="Isend" @click="getList" v-else-if="list.length<this.total">
						下拉加载更多
					</view>
				</block>
				<block v-if="current===1">
					<view class="item2" v-for="(item ,i) in list" :key="i" @tap="toDetailorShowDialog(item)">
						
						<view class="img">
							<view class="boximg">
								<u--image :src="item.thumb" :fade="true" duration="450" width='100%' height="450rpx"
									:lazy-load="true" mode="aspectFill">
									<template v-slot:loading>
										<u-loading-icon color="#468EFF"></u-loading-icon>
									</template>
								</u--image>
							</view>
							<view v-if="item.num == 0 && current === 0" class="sell-out">
								<image src="@/static/images/sell-out.png" mode=""></image>
								<text class="sell-out-text">首发售罄</text>
							</view>
						</view>
						<view class="goodsInfo">
							
							<view class="left">
								<view class="title">{{ item.title }}</view>
								<view class="userinfo">
									<view class="avatar">
										<image :src="item.portrait?item.portrait:'../../static/ico/icon/nouser.png'" mode="aspectFit"></image>
									</view>
									<view class="username">
										{{item.user_name?item.user_name:item.nickname}}
									</view>
								</view>
								
							</view>
							<view class="right">
								<view class="info u-label" v-if="searchActive==1">
									<text>{{item.goodsCode}}/</text>
									<text style="color: #A1A1AB;">{{item.allCount}}</text>
								</view>
								<view v-if="current === 0" class="price">
									<text class="rmb">¥</text>
									<text>{{ item.price?item.price:item.base_price }}</text>
								</view>
								<view v-else class="price current2">
									<text class="rmb">¥</text>
									<text>{{ item.price?item.price:item.base_price }}</text>
								</view>
								<view v-if="current === 0" class="count">
									<text>发行 {{ item.all_count }}份</text>
								</view>
								
							</view>
						</view>
					</view>
					<view class="kgzw" v-if="list.length%2==1"></view>
					<block v-if="!loading&&list.length<1">
						<Empty text="暂无藏品"></Empty>
					</block>
					<view class="Isend" v-else-if="list.length==this.total&&this.total>2">
						已经到底了
					</view>
					<view class="Isend" @click="getList" v-else-if="list.length<this.total">
						下拉加载更多
					</view>
				</block>
				<!-- 元宇宙tab -->
				<block v-if="current === 2">
					<view class="item" v-for="(item ,i) in mhlist" :key="i" @tap="toDetailorShowDialog(item)">
						<view class="img">
							<!-- <view class="ts">{{item.num>0?current==0?'首发售卖中':'售卖中':'已售罄'}}</view> -->
							<view class="boximg">
								<u--image :src="item.thumb" :fade="true" duration="450" width='100%' height="400rpx"
									:lazy-load="true" mode="aspectFill">
									<template v-slot:loading>
										<u-loading-icon color="#468EFF"></u-loading-icon>
									</template>
								</u--image>
								<!-- <image  @load="imageLoad(mhlist,item.thumb,i,'thumb')" :src="item.thumb" mode="aspectFill"></image>	 -->
							</view>
							<view v-if="item.num>0" class="count-down">
								<image src="@/static/images/count-down-bg.png" mode=""></image>
								<text>售卖中</text>
							</view>
							<view v-if="item.num == 0" class="sell-out">
								<image src="@/static/images/sell-out.png" mode=""></image>
								<text class="sell-out-text">盲盒售罄</text>
							</view>
							<!-- <view class="tys">
								<text
									class="txt">{{item.goods_special_type_name == null?"图片":item.goods_special_type_name}}</text>
								<text class="txt">艺术</text>
							</view> -->
						</view>
						<view class="goodsInfo">
							<view class="left">
								<view class="title">{{ item.title }}</view>
								<view class="userinfo">
									<view class="avatar">
										<image :src="item.portrait" mode="aspectFit"></image>
									</view>
									<view class="username">
										{{item.user_name?item.user_name:item.nickname}}
									</view>
								</view>
							</view>
							<view class="right">
								<view class="price">
									<text class="rmb">¥</text>
									<text>{{ item.price?item.price:item.base_price }}</text>
								</view>
								<!-- <view v-else class="price current2">
									<text class="rmb">¥</text>
									<text>{{ item.price?item.price:item.base_price }}</text>
								</view> -->
								<view v-if="current === 0" class="count">
									<text>限量: {{ item.all_count }}份</text>
								</view>
								<view class="info u-label" v-if="current==1">
									{{item.goodsCode+'/'+item.allCount}}
								</view>
							</view>
						</view>
						<!-- <view class="item_cont">
							<view class="info">
								<view class="title u-line-1">{{item.title}}</view>
							</view>
							<view class="info u-label" v-if="current==1">
								#{{item.goodsCode+'/'+item.allCount}}
							</view>
							<view class="btm">
								<image :src="item.portrait" mode="aspectFit"></image>
								<view class="name">
									{{item.user_name?item.user_name:item.nickname}}
								</view>
								<view class="price"><text class="dw">￥</text> {{item.price?item.price:item.base_price}}
								</view>
							</view>
						</view> -->
					</view>
					<view class="kgzw" v-if="mhlist.length%2==1"></view>
					<block v-if="!loading&&mhlist.length<1">
						<Empty text="暂未开放,敬请期待"></Empty>
					</block>
					<view class="Isend" v-else-if="mhlist.length==this.total&&this.total>2">
						已经到底了
					</view>
					<view class="Isend" @click="getList3" v-else-if="mhlist.length<this.total">
						下拉加载更多
					</view>
				</block>

			</u-skeleton>
		</view>
		<!-- <Nav :curr='1'></Nav> -->
		<u-back-top :scroll-top="scrollTop" :customStyle="customStyles"  :iconStyle="iconStyle"></u-back-top>
		<!-- <Empty text="暂未开放,敬请期待"  ></Empty> -->
		<!-- ---------------------------------------------------------------------------------------- -->
		
		<!-- customStyle="margin-top:300rpx" -->
		<u-popup :show="searchShow" mode="top" @close="searchShow = !searchShow" customStyle="margin-top:170rpx;" :overlayOpacity="0">
			<view class="searchBox" v-if="searchType === 1">
				<view class="searchItem" :class="{active: searchActive === 1}" @tap="searchActive = 1;searchShow=false;page1=1;getList2();">藏品</view>
				<view class="searchItem" :class="{active: searchActive === 2}" @tap="searchActive = 2;searchShow=false;page1=1;getList2();">盲盒</view>
			</view>
			<view class="searchBox" v-else>
				<view class="searchItem" :class="{active: searchCondition === 1}" @tap="searchCondition = 1;searchShow=false;page1=1;getList2();">价格升序</view>
				<view class="searchItem" :class="{active: searchCondition === 2}" @tap="searchCondition = 2;searchShow=false;page1=1;getList2();">价格降序</view>
				<view class="searchItem" :class="{active: searchCondition === 3}" @tap="searchCondition = 3;searchShow=false;page1=1;getList2();">最新上架</view>
				<view class="searchItem" :class="{active: searchCondition === 4}" @tap="searchCondition = 4;searchShow=false;page1=1;getList2();">交易次数最多</view>
			</view>
		</u-popup>

		<u-popup :show="show" closeable @close="show=!show" mode="top" customStyle="margin-top:150rpx;"
			:overlayOpacity="0">
			<view class="pop-content">
				<view class="p-title">品类</view>
				<view class="p-selectin-container">
					<view class="p-selection" :class="category==0?'active':''"
						@tap="category=0;page1=1;show=!show;getList2();">全部</view>
					<view class="p-selection" :class="category==1?'active':''"
						@tap="category=1;page1=1;show=!show;getList2();">藏品</view>
					<view class="p-selection" :class="category==2?'active':''"
						@tap="category=2;page1=1;show=!show;getList2();">盲盒</view>
				</view>
				<view class="p-title" style="margin-top:60rpx;">市场</view>
				<view class="p-selectin-container">
					<view class="p-selection" :class="series==0?'active':''"
						@tap="series=0;page1=1;show=!show;getList2();">全部</view>
					<view v-for="(item,i) in this.seriesList" :key="i" class="p-selection"
						:class="series==item.id?'active':''" @tap="series=item.id;page1=1;show=!show;getList2();">
						{{item.title}}</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="Allshow" mode="bottom" round="16" bgColor="#1E2020" closeable @close="close" @open="open">
			<view class="morelist">
				<view class="title">
					商品列表
				</view>
				<view class="stop">
					<view class="l" @click="toSell(sell)">
						<view :class="sell?'no':'yes'">
							<u-icon v-if="!sell" name="checkbox-mark" color="#000" size="20"></u-icon>
						</view> 仅看在售商品
					</view>
					<view class="r">
						<view :class="type==1?'act':''" @click="toType(1)">
							按编号排序
						</view>
						<view :class="type==2?'act':''" @click="toType(2)">
							按价格排序
						</view>
					</view>
				</view>
				<scroll-view scroll-y class="draw-lots-list" @scrolltolower="Drawlist()">
					<view class="item" v-for="(item,index) in purchaselist" :key='index' @click="toget(item.goods_id)">
						<view class="left">
							<view class="">
								<text class="tt1">
									#{{item.code}}/{{item.all_count}}
								</text>
								<text class="zs" v-if="item.num>0">在售</text>
								<text class="nzs" v-else-if="item.status==2">锁定中</text>
								<text class="nzs" v-else>已售</text>
							</view>
							<view class="tt2">
								链上标识:{{item.chain_mark}}
							</view>
						</view>
						<view class="right">
							<view class="tt1">
								¥{{item.price}}
							</view>
							<view class="tt2">
								售价
							</view>
							<image src="/static/ico/lr.png" mode="aspectFit" class="lr"></image>
						</view>
					</view>
				</scroll-view>
				<view class="more" v-if="totals>0" @tab="Drawlist">{{totals>purchaselist.length?'加载更多':'已加载全部'}}</view>
				<Empty v-if="purchaselist.length==0" text="暂无藏品"></Empty>
			</view>
		</u-popup>
		<canvas canvas-id="myCanvas" style="width:1000px;height:1000px;position: fixed;left: 0;top: -999999px;"></canvas>
	</view>
</template>

<script>
	import frImage from '@/components/fr-image/fr-image.vue'
	import {
		mixin
	} from '@/Mixins/mixin.js'
	import Empty from "@/components/Empty.vue"
	import Nav from "@/components/Nav.vue"
	export default {
		mixins: [mixin],
		components: {
			Nav,
			Empty,
			'fr-image':frImage
		},
		data() {
			return {
				search1value: 1,
				range1: [
					{ value: 1, text: "藏品" },
					{ value: 2, text: "盲盒" },
				],
				search2value: 1,
				range2: [
					{ value: 1, text: "价格升序" },
					{ value: 2, text: "价格降序" },
					{ value: 3, text: "最新上架" },
					{ value: 4, text: "交易次数最多" },
				],
				top: 0,
				page: 1,
				page1: 1,
				pages: 1,
				page2: 1,
				size: 10,
				list: [],
				seriesList: [],
				mhlist: [],
				total: 0,
				news: 2,
				price: 0,
				exchange: 0,
				category: 0,
				series: 0,
				loading: false,
				scrollTop: 0,
				iconStyle: {
					color: '#ffffff',
				},
				customStyles: {
					width: '80rpx',
					height:'80rpx',
					background: '#468EFF',
					right: '60rpx'
				},
				show: false,
				show1: false,
				tabs: [
					{ name: '首发' },
					{ name: '寄售' },
					{ name: '元宇宙' }
				],
				current: 0, // tab
				purchaselist: [],
				ids: 0,
				totals: 0,
				Allshow: false,
				type: 1,
				sell: true,
				height: 0,
				searchShow: false, // 筛选排序弹框
				searchType: 1, // 筛选类型显示 1藏品 2最新上架
				searchActive: 1 ,// 1藏品 2盲盒 
				searchCondition: 1 // 1价格升序 2价格降序 3最新上架 4交易次数最多
			}
		},
		filters: {
			avtive (val) {
				switch (val){
					case 1:
						return '藏品'
						break;
					case 2:
						return '盲盒'
						break;
					default:
						break;
				}
			},
			condition (val) {
				switch (val){
					case 1:
						return '价格升序'
						break;
					case 2:
						return '价格降序'
						break;
					case 3:
						return '最新上架'
						break;
					case 4:
						return '交易次数最多'
						break;
					default:
						break;
				}
			}
		},
		onShow() {
			if (this.current == 0) {
				this.page = 1
				this.getList()
			} else if (this.current == 1) {
				this.page1 = 1;
				this.getList2()
			} else {
				this.page2 = 1;
				// this.getList3() // 盲盒列表改为元宇宙
			}
			this.getSeries();
			uni.getSystemInfo({
				success: (e) => {
					this.top = e.statusBarHeight;
				}
			})
		},
		onLoad() {
			// uni.hideTabBar()
		},
		onPullDownRefresh() {
			if (this.current == 0) {
				this.page = 1
				this.getList()
			} else if (this.current == 1) {
				this.page1 = 1;
				this.getList2()
			} else {
				this.page2 = 1;
				// this.getList3() // 盲盒列表改为元宇宙
			}
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				if (this.current == 0) {
					this.getList()
				} else {
					this.getList2()
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			changesearch1(e) {
			      this.searchActive=e;
				  this.page1=1;
				  this.getList2();
			    },
			changesearch2(e) {
			  this.searchCondition=e;
			  this.page1=1;
			  this.getList2();
			},
			// search close
			searchClose () {
				this.searchShow = false
			},
			imageLoads(thumb, i) {
				if (thumb.indexOf('https') != -1) {
					uni.getImageInfo({
						src: thumb,
						success: (res) => {
							let imgInfo = {
								width: res.width,
								height: res.height,
								path: thumb
							}
							this.recursion(imgInfo, (base) => {
								this.$set(list[i], 'thumb', base)
							})
						}
					});
				}
			},
			Drawlist() {
				console.log(this.purchaselist.length, this.totals);
				if (this.purchaselist.length < this.totals) {
					this.pages += 1
					this.getGoodsSellersList()
				}
			},
			close() {
				this.Allshow = false
			},
			open() {},
			toget(e) {
				this.Allshow = false
				this.toPage('/pages/shop/info?id=' + e);
			},
			tonew(e) {
				this.news = e + 1
				this.page = 1
				this.page1 = 1;
				if (this.current == 0) {
					this.getList()
				} else {
					this.getList2()
				}
			},
			toprice(e) {
				this.price = e + 1
				this.page = 1
				this.page1 = 1;
				if (this.current == 0) {
					this.getList()
				} else {
					this.getList2()
				}
			},
			toexchange(e) {
				this.exchange = e + 1;
				this.page = 1
				this.page1 = 1;
				if (this.current == 0) {
					this.getList()
				} else {
					this.getList2()
				}
			},
			changeTab(e) {
				if (e.index != this.current) {
					this.current = e.index
					if (this.current == 0) {
						this.page = 1
						this.getList()
					} else if (this.current == 1) {
						this.page1 = 1;
						this.getList2()
					} else {
						this.page2 = 1;
						// this.getList3() // 盲盒列表改为元宇宙
					}
				}
			},
			async getList() {
				let data = await this.$http({
					url: this.$api.specialList,
					method: 'get',
					hideLoading: true,
					data: {
						page: this.page,
						page_size: this.size,
						sell_status: 1,
						type: 1
					}
				})
				let list = data.data
				if (data.code == 200) {
					if (this.page == 1) {
						this.list = []
					}
					this.total = list.total
					if (this.list.length < list.total) {
						this.list = this.list.concat(list.data)
						this.page += 1
					}
				} else {
					return []
				}
				
			},
			async getList2() {
				let data = await this.$http({
					url: this.searchActive === 1 ? this.$api.resaleGoodsList : this.$api.resaleBlindBoxList,
					method: 'get',
					hideLoading: true,
					data: {
						page: this.page1,
						page_size: this.size,
						order_by: this.searchCondition
						// price_order_type: this.price,
						// time_order_type: this.news,
						// exchange: this.exchange,
						// category: this.category,
						// series: this.series
					}
				})
				let list = data.data
				if (data.code == 200) {
					if (this.page1 == 1) {
						this.list = []
					}
					this.total = list.total
					if (this.list.length < list.total) {
						this.list = this.list.concat(list.data)
						this.page1 += 1
					}
				} else {
					return []
				}
			},
			// 获取盲盒列表
			async getList3() {
				let data = await this.$http({
					url: this.$api.specialList,
					method: 'get',
					hideLoading: true,
					data: {
						page: this.page2,
						page_size: this.size,
						sell_status: 1,
						type: 2
					}
				})
				let list = data.data
				if (data.code == 200) {
					if (this.page2 == 1) {
						this.mhlist = []
					}
					this.total = list.total
					if (this.mhlist.length < list.total) {
						this.mhlist = this.mhlist.concat(list.data)
						this.page2 += 1
					}
				} else {
					return []
				}
			},
			async getSeries() {
				let data = await this.$http({
					url: this.$api.shopSeriesList,
					method: 'get',
					hideLoading: true,
					data: {
						category: this.category,
					}
				})
				let list = data.data
				if (data.code == 200) {
					this.seriesList = list
				} else {
					return []
				}
			},
			toSell(e) {
				this.sell = !e
				this.pages = 1
				this.getGoodsSellersList()
			},
			toType(e) {
				this.type = e
				this.pages = 1
				this.getGoodsSellersList()
			},
			async getGoodsSellersList() {
				let data = await this.$http({
					url: this.$api.specialGoodsList,
					method: 'POST',
					hideLoading: true,
					data: {
						page: this.pages,
						page_size: 10,
						special_id: this.ids,
						type: this.type,
						sell_status: this.sell ? '1' : '2'
					}
				})
				let list = data.data.data
				if (data.code == 200) {
					if (this.pages == 1) {
						this.purchaselist = []
					}
					this.purchaselist = this.purchaselist.concat(list);
					this.totals = data.data.total
					this.Allshow = true;
				}
			},
			toDetailorShowDialog(item) {
				if (this.current == 1) {
					if(this.searchActive==2){
					    this.toPage('/subpage/Product/boxDetails?id=' + item.special_id+'&order_id='+item.order_id+'&type='+2);
					}else{
					   this.toPage('/pages/shop/info?id=' + item.goods_id + '&specialId=' + item.special_id);
					}
					// console.log(item)
					// return
					
					// if (item.goods_num * 1 > 1) {
					// 	this.pages = 1
					// 	this.ids = item.special_id
					// 	this.getGoodsSellersList();
					// } else {
					// 	this.toPage('/pages/shop/info?id=' + item.goods_id + '&specialId=' + item.special_id);
					// }
				} else if(this.current === 0) {
					this.toPage('/subpage/Product/details?id=' + item.id);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {

		min-height: calc(100vh - 104rpx);

		box-sizing: border-box;
		// background-color: $nft-bg-color;

		.top_tab {
			width: 750rpx;
			padding: 0 80rpx;
		}

		.mine_top_top_right {
			.img {
				width: 34rpx;
				height: 34rpx;
				margin-right: 20rpx;
			}
		}

		.Isend {
			font-size: 28rpx;
			font-weight: 400;
			color: #808080;
			line-height: 36rpx;
			text-align: center;
			margin: 16rpx;
		}

		.ftop {
			position: fixed;
			width: calc(100% - 60rpx);
			background: $nft-bg-color;
			z-index: 100;
			padding: 30rpx 0 10rpx;

		}
		.u-popup {
			::v-deep.u-slide-down-enter-to {
				background: #fff !important;
			}
		}
		

		.search {
			// width: auto;
			display: flex;
			// height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #A1A1AB;
			background-color: #fff;
			border-radius:20rpx;
			// padding: 20rpx 0;
			font-size: 28rpx;
			box-sizing: border-box;
			font-weight: 400;
			margin: 20rpx 30rpx;
			border: 1px solid #ccc;
			::v-deep{
				.uni-select{
					border:none;
				}
				.uni-select__selector{
					background-color: #fff;
					border:none;
					border-radius:0rpx 0rpx 20rpx 20rpx;
					top:82%;
					box-shadow:none;
				}
				.uni-popper__arrow{
					border:none;
					&::after{
						border:none;
					}
				}
				.uni-select__input-text,.uni-icons{
					color:#000 !important;
				}
			}
			.search1,.search2 {
				display: flex;
				width: 50%;
				height: 80rpx;
				align-items: center;
				justify-content: center;
				color:#000;
				text {
					margin-right: 10rpx;
				}
			}
			.line {
				width: 1rpx;
				height: 48rpx;
				background: #D8D8E5;
				border-radius: 4rpx;
			}
		
			.item {
				display: flex;
				align-items: center;
		
				.ico {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}
			}
		
			.iis {
				height: 22rpx;
				width: 20rpx;
			}
		
			.ttt {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #A7A6B6;
				line-height: 36rpx;
				margin-right: 8rpx;
				border: none;
			}
		
		}
		
		


		.collection {
			// padding-top: 130rpx;
			padding: 0rpx 28rpx 0;
			display: flex;

			.u-skeleton {
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: center;
				width: 100%;
			}

			.kgzw {
				width: calc(50% - 18rpx);
			}

			.item {
				background: #FFFFFF;
				box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);
				border-radius: 2rpx;
				overflow: hidden;
				margin-bottom: 30rpx;
				width: calc(50% - 18rpx);
				margin: 11rpx 12rpx 11rpx 6rpx;
				.info{
					font-size: 24rpx;
				}
				.img {
					position: relative;
					
					.count-down {
						position: absolute;
						right: 0;
						top: 0;
						width: 140rpx;
						height: 40rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #FFFFFF;
						image {
							width: 100%;
							height: 100%;
						}
						text {
							position: absolute;
							top: 0;
							right: 10%;
						}
					}
					
					.sell-out {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 132rpx;
						height: 127rpx;
						image {
							width: 100%;
							height: 100%;
						}
						.sell-out-text {
							display: block;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							width: 52rpx;
							height: 66rpx;
							font-size: 24rpx;
							font-weight: 600;
							color: #FFFFFF;
							text-align: center;
							white-space:normal;
						}
					}

					.boximg {
						width: 100%;
						height: 450rpx;
						overflow: hidden;
						background: url(@/static/images/shopbg.png) no-repeat;
						background-size: cover;
					}

					.ts {
						min-width: 90rpx;
						height: 48rpx;
						background: rgba(0, 0, 0, 0.3);
						border-radius: 24rpx;
						opacity: 0.8;
						padding: 0 15rpx;
						position: absolute;
						top: 18rpx;
						left: 16rpx;
						z-index: 1;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
					}

					.tys {
						position: absolute;
						border-radius: 8rpx;
						bottom: 10rpx;
						left: 16rpx;
						display: flex;
						align-items: center;
						z-index: 1;

						.txt {
							border-radius: 4rpx;
							width: 60rpx;
							height: 30rpx;
							padding: 5rpx;
							color: #FFF;
							background: #000;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 24rpx;
							margin-right: 10rpx;
						}

						.txt:nth-child(2n) {
							background: #50E3C2;
							color: #FFF;
						}
					}

					.status {
						display: flex;
						align-items: center;
						position: absolute;
						left: 34rpx;
						top: 48rpx;
						padding: 8rpx 12rpx;
						background: #141516;
						border-radius: 19rpx;
						font-size: 24rpx;
						font-weight: 600;
						color: #8F8F8F;

						text {
							margin-left: 12rpx;
						}

						&.next {
							color: #F3E0BC;

							::v-deep .u-icon__icon {
								color: #F3E0BC !important;
							}

							::v-deep .u-count-down__text {
								font-size: 24rpx;
								font-weight: 600;
								color: #F3E0BC;
							}

						}
					}
				}
				
				.goodsInfo {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					padding: 0 12rpx;
					box-sizing: border-box;
					margin-top: 10rpx;
					.left {
						width: 50%;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						.title {
							overflow: hidden;
							text-overflow: ellipsis;
							font-weight: 600;
							color: #101010;
							font-size: 28rpx;
						}
						.userinfo {
							display: flex;
							align-items: center;
							margin-top: 10rpx;
							.avatar {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 32rpx;
								height: 32rpx;
								// border: 1rpx solid #ccc;
								border-radius: 50%;
								margin-right: 8rpx;
								image {
									width: 100%;
									height: 100%;
								}
							}
							.username {
								flex: 1;
								overflow: hidden;
								text-overflow: ellipsis;
								font-weight: 400;
								color: #A1A1AB;
								font-size: 24rpx;
							}
						}
					}
					.right {
						overflow: hidden;
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						.price {
							color: #2065AC;
							font-weight: bold;
							font-size: 36rpx;
							.rmb {
								font-size: 20rpx;
							}
						}
						.current2 {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 120rpx;
							height: 52rpx;
							background: #468EFF;
							border-radius: 8rpx;
							color: #fff;
							padding: 14rpx;
							box-sizing: border-box;
							font-size: 24rpx;
						}
						.info {
							font-size: 24rpx;
						}
						.count {
							font-weight: 400;
							color: #A1A1AB;
							font-size: 24rpx;
							// margin-top: 16rpx;
						}
					}
				}
				
				.item_cont {
					border-radius: 0 0 60rpx 60rpx;
					padding: 12rpx 18rpx 30rpx;

					.info {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.title {
							font-size: 28rpx;
							font-weight: 600;
							color: #000;
							line-height: 46rpx;
							flex: 1;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}

						.price {
							margin-top: 10rpx;

							.dw {
								font-size: 17rpx;
							}

							font-size: 32rpx;
							font-weight: 900;
							color: #000;
							line-height: 56rpx;
						}
					}

					.u-label {
						width: 146rpx;
						height: 36rpx;
						background: linear-gradient(90deg, #9C9C9C 0%, #3B3B3B 100%);
						border-radius: 4rpx;
						font-size: 20rpx;
						font-weight: 600;
						color: #FFFFFF;
						justify-content: center;
						margin-top: -8rpx;
						margin-bottom: 15rpx;
					}

					.tags {
						display: flex;
						align-items: center;

						image {
							width: 36rpx;
							height: 32rpx;
							margin: 5rpx 10rpx;
						}

						text {
							width: calc(100% - 36rpx);
							font-size: 20rpx;
							font-weight: 600;
							color: #6B5931;
						}

						line-height: 36rpx;
						border-radius: 8rpx;
						background: #FAEAC5;
						color: #6B5931;
						text-align: left;

					}

					.btm {
						display: flex;
						align-items: center;

						image {
							height: 36rpx;
							width: 36rpx;
							border-radius: 100%;
							margin-right: 15rpx;
							background: #f8f8f8;
						}

						.name {
							font-size: 24rpx;
							font-weight: 600;
							color: #222;
							line-height: 34rpx;
							flex: 1;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}

						.price {
							margin-top: 10rpx;

							.dw {
								font-size: 17rpx;
							}

							font-size: 32rpx;
							font-weight: 900;
							color: #000;
							line-height: 56rpx;
						}
					}
				}
			}
			
			.item2 {
				background: #F5F5FA;
				// box-shadow: 2px 2px 8px 3px rgba(230, 230, 230, 0.5);
				border-radius: 2rpx;
				overflow: hidden;
				margin-bottom: 30rpx;
				width: calc(50% - 18rpx);
				margin: 11rpx 12rpx 11rpx 6rpx;
				padding: 10rpx;
				box-sizing: border-box;
				box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.15);
				border-radius: 10rpx;
				// padding: 20rpx 18rpx;
				.userinfo {
					display: flex;
					align-items: center;
					margin: 5rpx 0 10rpx 0;
					.avatar {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 32rpx;
						height: 32rpx;
						// border: 1rpx solid #ccc;
						border-radius: 50%;
						margin-right: 8rpx;
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.username {
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						font-weight: 400;
						color: #16172F;
						font-size: 24rpx;
					}
				}
				.img {
					position: relative;
					
					.count-down {
						position: absolute;
						right: 0;
						top: 0;
						width: 140rpx;
						height: 40rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #FFFFFF;
						image {
							width: 100%;
							height: 100%;
						}
						text {
							position: absolute;
							top: 0;
							right: 10%;
						}
					}
					
					.sell-out {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 132rpx;
						height: 127rpx;
						image {
							width: 100%;
							height: 100%;
						}
						.sell-out-text {
							display: block;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							width: 52rpx;
							height: 66rpx;
							font-size: 24rpx;
							font-weight: 600;
							color: #FFFFFF;
							text-align: center;
							white-space:normal;
						}
					}
				
					.boximg {
						// align-items: center;
						width: 100%;
						height: 450rpx;
						overflow: hidden;
						// background: url(@/static/images/shopbg.png) no-repeat;
						background-size: cover;
						margin: 0 auto;
					}
				
					.ts {
						min-width: 90rpx;
						height: 48rpx;
						background: rgba(0, 0, 0, 0.3);
						border-radius: 24rpx;
						opacity: 0.8;
						padding: 0 15rpx;
						position: absolute;
						top: 18rpx;
						left: 16rpx;
						z-index: 1;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
					}
				
					.tys {
						position: absolute;
						border-radius: 8rpx;
						bottom: 10rpx;
						left: 16rpx;
						display: flex;
						align-items: center;
						z-index: 1;
				
						.txt {
							border-radius: 4rpx;
							width: 60rpx;
							height: 30rpx;
							padding: 5rpx;
							color: #FFF;
							background: #000;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 24rpx;
							margin-right: 10rpx;
						}
				
						.txt:nth-child(2n) {
							background: #50E3C2;
							color: #FFF;
						}
					}
				
					.status {
						display: flex;
						align-items: center;
						position: absolute;
						left: 34rpx;
						top: 48rpx;
						padding: 8rpx 12rpx;
						background: #141516;
						border-radius: 19rpx;
						font-size: 24rpx;
						font-weight: 600;
						color: #8F8F8F;
				
						text {
							margin-left: 12rpx;
						}
				
						&.next {
							color: #F3E0BC;
				
							::v-deep .u-icon__icon {
								color: #F3E0BC !important;
							}
				
							::v-deep .u-count-down__text {
								font-size: 24rpx;
								font-weight: 600;
								color: #F3E0BC;
							}
				
						}
					}
				}
				.goodsInfo {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 12rpx;
					box-sizing: border-box;
					margin-top: 10rpx;
					.left {
						// width: 38%;
						flex: 1;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						.title {
							overflow: hidden;
							text-overflow: ellipsis;
							font-weight: 600;
							color: #101010;
							font-size: 28rpx;
						}
						.info {
							font-size: 24rpx;
						}
						.userinfo {
							display: flex;
							align-items: center;
							margin-top: 10rpx;
							.avatar {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 32rpx;
								height: 32rpx;
								// border: 1rpx solid #ccc;
								border-radius: 50%;
								margin-right: 8rpx;
								image {
									width: 100%;
									height: 100%;
								}
							}
							.username {
								overflow: hidden;
								text-overflow: ellipsis;
								font-weight: 400;
								color: #A1A1AB;
								font-size: 24rpx;
							}
						}
					}
					.right {
						overflow: hidden;
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						.info{
							font-size: 24rpx;
						}
						.price {
							color: #101010;
							// font-weight: bold;
							font-size: 34rpx;
							.rmb {
								font-size: 20rpx;
							}
						}
						.current2 {
							display: flex;
							justify-content: center;
							align-items: center;
							color: #2065AC;
							font-size: 34rpx;
							font-weight: 600;
							.rmb {
								font-size: 20rpx;
							}
						}
						
						.count {
							font-weight: 400;
							color: #A1A1AB;
							font-size: 24rpx;
							// margin-top: 16rpx;
						}
					}
				}
			}
			.item:nth-child(2n) {
				margin: 11rpx 6rpx 11rpx 12rpx;
			}
		}
	}

	.pop-content {
		width: calc(100% - 16rpx);
		background-color: #FFF;
		padding: 32rpx 8rpx 102rpx;
		border-radius: 32rpx 32rpx 0px 0px;
		height: 60vh;

		.p-title {
			margin-top: 26rpx;
			font-size: 28rpx;
			margin-left: 16rpx;
			font-weight: 600;
			color: #000000;

		}

		.f-title {
			font-weight: 600;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			padding-left: 20rpx;
		}

		.more {
			font-size: 24rpx;
			font-weight: 600;
			color: #C1C1C1;
			text-align: center;
			line-height: 48rpx;

		}

		.p-selectin-container {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}

		.p-selection {
			margin-top: 20rpx;
			margin-left: 16rpx;
			display: flex;
			flex-direction: row;
			width: 160rpx;
			height: 56rpx;
			background: #F5F5F5;
			border-radius: 4px;
			color: #000000;
			font-size: 24rpx;
			align-items: center;
			justify-content: center;
		}

		.active {
			background: #000000;
			color: white;
		}

		.draw-lots-list {
			height: 55vh;
		}

		.left {
			display: flex;
			flex-direction: row;
			height: 80rpx;
			line-height: 80rpx;
			padding-top: 20rpx;
			border-bottom: 2rpx #f5f5f5 solid;
			align-items: center;

		}

		.title {
			font-size: 28rpx;
			color: #131415;
			flex: 1;
			margin-left: 20rpx;
		}

		.num {
			font-size: 24rpx;
			color: #666666;
			margin-right: 20rpx;
		}

		.buy {
			background-color: #000;
			color: #fff;
			font-size: 24rpx;
			font-weight: 600;
			text-align: center;
			line-height: 50rpx;
			margin-right: 40rpx;
			width: 90rpx;
			height: 50rpx;
			border-radius: 8rpx;
		}
	}

	.all-list {
		overflow: hidden;
		position: fixed;
		height: 100%;
	}

	.morelist {
		height: 80vh;
		overflow: auto;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0px 0px;
		padding: 26rpx;

		.title {
			font-size: 32rpx;
			margin: 20rpx 0;
			font-weight: 600;
			color: #333333;
			line-height: 44rpx;
		}

		.stop {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;

			.l {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #A0A0A0;
				line-height: 34rpx;

				.no {
					width: 32rpx;
					height: 32rpx;
					border-radius: 4rpx;
					border: 2rpx solid #DDDDDD;
					margin-right: 10rpx;
				}

				.yes {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 32rpx;
					height: 32rpx;
					border-radius: 4rpx;
					// background: #F2E0BC;
					border: 2rpx solid #ccc;
					margin-right: 10rpx;
				}
			}

			.r {
				display: flex;
				justify-content: space-between;
				min-width: 338rpx;
				height: 60rpx;
				background: #E3EAF5;
				border-radius: 8rpx;
				font-size: 24rpx;
				// font-weight: 600;
				line-height: 34rpx;
				color: #8C93AA;
				text-align: center;
				line-height: 60rpx;

				view {
					width: 164rpx;
				}

				.act {
					width: 164rpx;
					color: #333333;
					height: 60rpx;
					background: #EEF2F9;
					border-radius: 8rpx;
				}
			}
		}

		.draw-lots-list {
			height: 68vh;

		}

		.more {
			font-size: 24rpx;
			font-weight: 600;
			color: #C1C1C1;
			text-align: center;
		}

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #F5F5F5;
			
			.left {
				.tt1 {
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
					line-height: 40rpx;
					margin-right: 10rpx;
				}

				.zs {
					min-width: 54rpx;
					height: 28rpx;
					background: #000000;
					border-radius: 4rpx;
					font-size: 20rpx;
					text-align: center;
					// font-weight: 600;
					padding: 0 10rpx;
					color: #FFFFFF;
					line-height: 28rpx;
				}

				.nzs {
					min-width: 54rpx;
					height: 28rpx;
					padding: 0 10rpx;
					background: #E3EAF5;
					border-radius: 4px;
					text-align: center;
					font-size: 20rpx;
					// font-weight: 600;
					color: #FFFFFF;
					line-height: 28rpx;
				}

				.tt2 {
					font-size: 24rpx;
					// font-weight: 600;
					color: #C1C1C1;
					line-height: 34rpx;
					margin-top: 10rpx;
				}
			}

			.right {
				position: relative;
				padding-right: 60rpx;

				.tt1 {
					font-size: 24rpx;
					font-weight: bold;
					color: #333333;
					line-height: 28rpx;
					text-align: right;
				}

				.tt2 {
					font-size: 24rpx;
					// font-weight: 600;
					color: #C1C1C1;
					line-height: 34rpx;
					margin-top: 10rpx;
					text-align: right;
				}

				.lr {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					height: 40rpx;
					width: 64rpx;
				}
			}
		}
	}
	
	.searchBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 30rpx;
		background: #fff;
		padding: 30rpx 0;
		.searchItem {
			width: 48%;
			background: #F5F5FA;
			border-radius: 2rpx;
			color: #A1A1AB;
			font-size: 24rpx;
			padding: 16rpx 0;
			text-align: center;
			margin: 10rpx 0;
		}
		.active {
			border: 1rpx solid #468EFF;
			color: #468EFF;
			background: #fff;
		}
	}
</style>
